<script setup >
import { ref, computed, watch } from 'vue'
import { getBuyinfo, getQrCode } from '@/api/LXZindex'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'

// 引入pinia数据
import { storeToRefs } from 'pinia'
import { FilmDataObj } from '@/stores/LXZ.ts'

// 获取pinia实例内容
const FilmDataStore = FilmDataObj()

// 获取pinia数据使用这种方式
const { FilmImg, FilmObj } = storeToRefs(FilmDataStore)
console.log('ChooseYourSeat', FilmImg.value, '123123', FilmObj.value)

const { AddOrders, PayForTheOrder } = FilmDataStore

//构建路由方法对象
const router = useRouter()
// 构建路由参数对象
const route = useRoute()

// 获取购票信息数据
let SessionData = ref(null)
let activeIcon = null
let inactiveIcon = null
getBuyinfo().then((res) => {
  // console.log(res.data.data)
  SessionData.value = res.data.data

  activeIcon = SessionData.value.seat.image.selectedImages
  inactiveIcon = SessionData.value.seat.image.seatLegends[0].legendIcon

  console.log('购票', SessionData.value)
})
// 获取座位信息
let CMchecked = ref([])
// 监听座位选择
let SeatArray = ref([])

// 计算票价
let prcal = ref([])
let btntext = ref('请先选择座位')
// 返回价格
let priceAll = ref(0)

watch(
  () => CMchecked.value,
  (newValue, oldValue) => {
    prcal = [...newValue]
    // console.log(prcal.length)

    priceAll.value = 38 * prcal.length

    if (prcal.length == 0) {
      // console.log('请选择', prcal.length)

      btntext = '请先选择座位'
    } else {
      btntext = `￥${priceAll.value}  确认购买座位`
      // console.log(prcal.length, priceAll.value, btntext)
    }

    SeatArray = newValue.map((item) => `${item.rowId}排${item.columnId}座`)
    console.log('SeatArray座位', SeatArray)
  }
)

// 提示用户购买数量上限
function Tislog() {
  if (prcal.length >= 6) {
    showToast('一次最多购买6张票')
  }
}

// 计算日期
const dateConversion = computed(() => {
  // 分割字符串获取月份和日期
  const [year, month, day] = FilmObj?.value?.date.split('-')
  // 返回格式化的日期字符串
  return `${month}月${day}日`
})

// 场次下标
let SessionIndex = ref(0)

// 切换场次开关和文字
let show = ref(false)

let SessionChange = ref({
  text: '切换场次',
  icon: 'arrow-down',
})

function switchSession() {
  show = !show
  if (show) {
    SessionChange.value = {
      text: '收起场次',
      icon: 'arrow-down',
    }
  } else {
    SessionChange.value = {
      text: '切换场次',
      icon: 'arrow-up',
    }
  }
}



// 提交订单
function submitData() {
 

  console.log(SeatArray)

  PayForTheOrder({
    // 影片id
    movieId: FilmObj?.value.id,
    // 影片封面
    img: FilmImg.value,
    // 影片名称
    name: FilmObj?.value.name,
    // 选择的座位
    Seat: [...SeatArray],
    // 下单时间
    PlaceAnOrderTime: Date.now(),
    // 影院名称
    CMname: FilmObj?.value.CMname,
    // 影院id
    CinemaId: FilmObj?.value.movid,

    // 影厅号
    lobbySeats: FilmObj?.value.lobbySeats,
    // 票据日期
    TicketDate: FilmObj?.value.date,
    // 订单号
    OrderNumber: `${FilmObj?.value.id}${Date.now()}`,
    // 是否支付
    isPay: false,
    // 价格
    price: priceAll.value,
    // 放映时间
    Playtime: `${SessionData?.value.relatedShow[SessionIndex.value].showTime} - ${
      SessionData?.value.relatedShow[SessionIndex.value].endTime
    }`,

    // 票据日期信息
    dateinfo: `${SessionData?.value.relatedShow[SessionIndex.value].dateDesc}${
      dateConversion.value
    }${SessionData?.value.relatedShow[SessionIndex.value].showTime}(${FilmObj.value.Language}${
      FilmObj.value.ScreenLevel
    })`,
  })
  // 跳转至支付订单页面
  router.push({
    name: 'ordersdetali',
  })


}
</script>




<template>
  <div class="BuyTicket-Box">
    <!-- 导航栏 -->
    <!-- 顶部导航栏 -->
    <!-- <p>{{ btntext }}</p> -->
    <van-nav-bar :title="FilmObj?.CMname" @click-left="router.back()">
      <template #right>
        <van-icon name="wap-nav" size="28rem" color="#fff" />
      </template>
      <template #left>
        <van-icon name="arrow-left" size="28rem" color="#fff" />
      </template>
    </van-nav-bar>

    <!-- 图例 -->
    <div class="Legend">
      <van-image
        width="20rem"
        height="20rem"
        :src="SessionData?.seat.image.seatLegends[0].legendIcon"
      ></van-image>

      <span class="tl-icon">可选</span>
      <van-image
        width="20rem"
        height="20rem"
        :src="SessionData?.seat.image.seatLegends[1].legendIcon"
      >
      </van-image>

      <span class="tl-icon">已售</span>
      <van-image
        width="20rem"
        height="20rem"
        :src="SessionData?.seat.image.seatLegends[2].legendIcon"
      >
      </van-image>
      <span class="tl-icon">不可售</span>
    </div>

    <!-- 选座位 -->
    <div class="Seat-box">
      <div class="title">{{ FilmObj?.lobbySeats }}</div>

      <van-checkbox-group v-model="CMchecked" shape="square" :max="6">
        <div
          class="seat-row"
          v-for="(item, index) in SessionData?.seat.regions[0].rows"
          :key="index"
        >
          <div
            class="icicon"
            :class="(index == 0 ? `start` : false) || (index == 8 ? `end` : false)"
          >
            {{ index + 1 }}
          </div>
          <div v-for="(itm, indexs) of item?.seats" :key="indexs">
            <van-checkbox :name="itm" @click="Tislog">
              <template #icon="props">
                <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
              </template>
            </van-checkbox>
          </div>
        </div>
      </van-checkbox-group>
    </div>

    <!-- 底部购票信息 -->
    <div class="bottom-info">
      <!-- 购买信息 -->
      <div class="movie-info">
        <!-- 上层 信息 -->
        <div class="movie-top">
          <!-- 影片详情 -->
          <div class="title" @click="switchSession">
            <span>{{ FilmObj?.name }}</span>
            <span style="color: #6fa4e9"
              >{{ SessionChange.text }}<van-icon :name="SessionChange.icon"
            /></span>
          </div>
          <!-- 影片放映信息 -->
          <div class="movie-time">
            {{ SessionData?.relatedShow[SessionIndex].dateDesc }} {{ dateConversion }}
            {{ SessionData?.relatedShow[SessionIndex].showTime }} -
            {{ SessionData?.relatedShow[SessionIndex].endTime }} {{ FilmObj.Language }}
            {{ FilmObj.ScreenLevel }}
          </div>

          <!-- 切换场次 -->
          <div class="Switch-Sessions" v-show="show">
            <div
              class="Switch-Session-Data"
              :class="index == SessionIndex ? 'Session-active' : ''"
              v-for="(item, index) in SessionData?.relatedShow"
              :key="index"
              @click="SessionIndex = index"
            >
              <div class="title-itme">{{ item.showTime }}</div>
              <div class="lang">{{ FilmObj.Language }}{{ FilmObj.ScreenLevel }}</div>
              <div class="price">￥38元起</div>
            </div>
          </div>
        </div>

        <!-- 下层 信息 -->
        <div class="movie-bottom" v-if="prcal.length">
          <!-- <div v-if=""></div> -->
          <div class="seat-info" v-for="(item, index) in CMchecked" :key="index">
            <div>{{ item.rowId }}排{{ item.columnId }}座</div>
            <div>￥38</div>
          </div>
        </div>
      </div>

      <van-button
        round
        type="success"
        :disabled="!prcal.length"
        :text="btntext"
        @click="submitData"
      ></van-button>
    </div>
  </div>
</template>

<style lang="less" scoped>
// 页面盒子样式
.BuyTicket-Box {
  width: 100vw;
  height: 100vh;
  background-color: #f6f6f6;
}

//修改vant顶部栏样式
:deep(.van-nav-bar__content) {
  background-color: #e54848;
}
:deep(.van-nav-bar__title) {
  color: white;
  font-weight: normal;
}

// 底部按钮和购票信息样式
.bottom-info {
  width: 100vw;
  padding: 10rem;
  position: fixed;
  bottom: 0;
  left: 0;
  box-sizing: border-box;

  :deep(.van-button) {
    background-image: linear-gradient(to right, #f03d38, #fe5167);
    border: none;
    width: 355rem;
  }
  // 影片信息样式
  .movie-info {
    background-color: white;
    padding: 10rem;
    box-sizing: border-box;
    margin-bottom: 20rem;
    border-radius: 15rem;

    .movie-top {
      // height: 61px;
      font-size: 15rem;
      display: flex;
      flex-flow: column;
      justify-content: space-around;

      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .movie-time {
        color: rgb(73, 73, 73);
      }
    }
    .movie-bottom {
      overflow: auto;
      border-top: 1px solid #e9e9e9;

      height: 61rem;
      margin: 10rem 0;

      display: flex;
      flex-flow: nowrap;
      align-items: center;
      font-size: 14rem;

      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */
      &::-webkit-scrollbar {
        display: none;
      }

      .seat-info {
        padding: 5rem 10rem;
        border-radius: 5rem;
        white-space: nowrap;

        background-color: #f6f6f6;

        margin: 0 10rem;
      }
    }
  }
}

// 选座位样式
:deep(.van-checkbox__icon) {
  width: auto;
  height: auto;
}

.Seat-box {
  width: 100vw;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  //   padding: 50rem 0;
  .title {
    margin: 25rem 0;
    color: #afafaf;
  }
  .seat-row {
    display: flex;
    align-items: center;
    color: white;
    position: relative;

    .start {
      border-radius: 10rem 10rem 0 0;
    }
    .end {
      border-radius: 0 0 10rem 10rem;
    }
    .icicon {
      // height: 100%;
      height: 20rem;
      width: 10rem;
      background-color: rgba(0, 0, 0, 0.2);
      font-size: 8rem;
      transform: scale(1.45);
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 2rem;
      left: -15rem;
    }

    .img-icon {
      width: 20rem;
      height: 20rem;
      margin: 3rem;
    }
  }
}

// 图例样式

.Legend {
  height: 46rem;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  .tl-icon {
    margin-left: 10rem;
    margin-right: 20rem;
  }
}

//切换场次样式
.Switch-Sessions {
  display: flex;
  font-size: 14rem;
  overflow-x: scroll;

  .Switch-Session-Data {
    padding: 5rem 8rem;
    font-size: 11rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;

    background-color: #fff5f5;
    margin: 0 5rem;
    margin-top: 5rem;
    border-radius: 5rem;
    div {
      margin: 1rem;
    }

    .title-itme {
      font-size: 14rem;
    }
    .lang {
      font-size: 12rem;
      color: #bbb3c1;
    }
  }

  .Session-active {
    border: 1rem solid #e54848;
    background-color: #ffebeb;
    box-sizing: border-box;
  }
}
</style>